.approval-wrapper {
  background: #f1f1f1;
  height: 100%;
  position: relative;
}
// 首页
.dash-wrapper {
  background: #f1f1f1;
  .dash-top {
    height: 120px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    .avatar-index-wrapper {
      margin: 24px;
      .avatar-img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
      }
      .avatar-text {
        font-size: 14px;
        color: $fc3;
      }
    }
  }
  .avatar-img {
    width: 68px;
    height: 68px;
  }
  .dash-right {
    .role-info {
      font-size: 14px;
      font-weight: 400;
      color: rgba(140, 140, 140, 1);
      line-height: 20px;
    }
  }
  .dash-mid {
    width: 100%;
    height: 158px;
    background: #f1f1f1;
    display: flex;
    justify-content: space-between;
    .dash-item {
      width: 49%;
      padding: 0 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .dash-title {
        margin-top: 16px;
        img {
          width: 25px;
          height: 25px;
        }
        span {
          font-size: 16px;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
          line-height: 22px;
        }
      }
      .employ-wrap {
        margin-top: 20px;
        width: 100%;
        height: 130px;
        .tapButtonBox {
          display: flex;
          flex-wrap: no-wrap;
          .employ-left {
            width: 100px;
            height: 130px;
            border-right: 1px solid #e8e8e8;
            padding-right: 20px;
            .tapTitle {
              font-size: 15px;
              font-weight: 400;
              color: rgba(156, 156, 156, 1);
              line-height: 20px;
            }
            .tapSpan-orange {
              font-size: 24px;
              font-weight: 500;
              color: $primary;
              line-height: 34px;
            }
          }
          .employ-right {
            width: 80%;
            height: 90px;
            padding-left: 24px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .tapButton {
              width: 84px;
              height: 54px;
              margin-right: 12px;
              margin-bottom: 10px;
              .tap {
                display: block;
                width: 76px;
                text-align: center;
              }
              .tapTitle {
                font-size: 15px;
                font-weight: 400;
                color: rgba(156, 156, 156, 1);
                line-height: 20px;
              }
              .tapSpan {
                font-size: 18px;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
                line-height: 26px;
                padding-top: 10px;
              }
            }
          }
        }
      }
    }
  }
  .dash-btm {
    display: flex;
    // align-items: center;
    justify-content: space-around;
    .calender-wrap {
      width: 360px;
      height: 100%;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      margin: 20px;
    }
    .memo {
      width: 62%;
      display: flex;
      flex-direction: column;
      .memo-top {
        width: 100%;
        height: 68px;
        margin-top: 24px;
        padding: 0 20px;
        overflow: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .day {
          font-weight: 500;
          line-height: 66px;
          color: rgba(86, 86, 86, 1);
        }
      }
      .matter-title {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
.approvaler-wrap {
  width: 96%;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  background: rgba(250, 250, 250, 1);
  .approvaler-item {
    min-height: 50px;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    .approvaler-info {
      width: 100%;
      padding-top: 10px;
      .username {
        margin-left: 4px;
      }
      .opinion {
        width: 100%;
        text-align: left;
        padding: 10px;
        color: #999;
        font-size: 13px;
        line-height: 18px;
      }
    }
  }
  .notifier {
    // background:rgba(252,175,79,0.15);
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
    .title {
      display: block;
      width: 166px;
      text-align: left;
      color: #777777;
    }
    .notifierlist {
      width: 340px;
      padding: 4px 0;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .opinion {
    width: 100%;
    text-align: left;
    padding: 10px;
    color: #999;
    font-size: 13px;
    line-height: 18px;
  }
}
.approval-one-notifier {
  .notifier {
    // background:rgba(252,175,79,0.15);
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
    .title {
      display: block;
      width: 166px;
      text-align: left;
      color: #777777;
    }
    .notifierlist {
      width: 340px;
      padding: 4px 0;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .opinion {
    width: 100%;
    text-align: left;
    padding: 10px;
    color: #999;
    font-size: 13px;
    line-height: 18px;
  }
}
.notifier {
  // background:rgba(252,175,79,0.15);
  background: #fff;
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  .title {
    display: block;
    width: 166px;
    text-align: left;
    color: #777777;
  }
  .notifierlist {
    width: 340px;
    padding: 4px 0;
    display: flex;
    flex-wrap: wrap;
  }
}
.notifier-row {
  position: relative;
  margin-left: -19px;
  padding-top: 24px;
  .spot-blue {
    background: #fff;
    z-index: 5;
    font-size: 24px;
    line-height: 37px;
    font-weight: 700;
    color: #3296fa;
    display: block;
    width: 38px;
    height: 38px;
    text-align: center;
  }
}
.colorE8 {
  color: #e8e8e8;
}
.color222 {
  color: #222222;
}
.border-type {
  font-size: 10px;
  height: 20px;
  line-height: 20px;
  border-radius: 4px;
  padding: 0 4px;
  color: $primary;
  border: 1px solid $primary;
}
.pl20 {
  padding-left: 20px;
}
.bl-orange {
  position: relative;
  border-left: 2px solid $orange;
  margin-left: 24px;
  z-index: 4;
  &.lastone {
    &:after {
      content: "";
      position: absolute;
      top: 24px;
      bottom: 0;
      left: -2px;
      width: 2px;
      background: $white;
      z-index: -1;
    }
  }
}
.detail-form {
  .ant-col-4 {
    width: 94px !important;
  }
  .ant-form {
    .ant-form-item {
      margin: 0;
      .ant-col-4 {
        width: 94px !important;
      }
      .ant-form-item-label {
        width: 94px !important;
        min-height: 40px;
        white-space: pre-wrap !important;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        label {
          display: block;
          color: #999999;
          font-size: 14px;
          line-height: 20px;
          font-weight: 400 !important;
          text-align: right;
        }
      }
      .ant-form-item-control-wrapper {
        margin-left: 4px;
        color: #333333 !important;
        font-size: 14px;
        background: #fff !important;
      }
    }
  }
}
.avatar-mid {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  z-index: 5;
}
.bor0 {
  border-radius: 0% !important;
}
.arrow-icon {
  width: 30px;
  height: 30px;
  padding: 4px;
  z-index: 5;
}
.font38 {
  font-size: 38px;
}
.font22 {
  font-size: 21px !important;
}
// 备忘录

.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: none !important;
}

.title1 {
  font-size: 14px;
  color: rgba(37, 37, 37, 1);
  line-height: 20px;
}
.tip {
  color: $fc3;
  text-align: center;
  padding-top: 30px;
}
.memolist {
  min-height: 118px;
  background: rgba(250, 250, 250, 1);
  border-radius: 8px;
  padding: 15px 20px;
  .memo-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    img {
      width: 16px;
      height: 16px;
    }
    .memo-left {
      margin-left: 20px;
      p {
        width: 500px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 0;
        margin: 0;
      }
      p:nth-of-type(1) {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        line-height: 20px;
      }
      p:nth-of-type(2) {
        font-size: 12px;
        font-weight: 400;
        color: rgba(156, 156, 156, 1);
        line-height: 18px;
      }
    }
    .memo-right {
      position: absolute;
      right: 40px;
    }
  }
}

.approval-detail-wrapper {
  background: $back;
  .approval-detail-Back {
    width: 7px;
    height: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.65);
    border-left: 1px solid rgba(0, 0, 0, 0.65);
    transform: rotate(45deg);
    margin-bottom: 2px;
  }
  .approval-block {
    background: $white;
    padding: 16px 24px;
    border-radius: 4px;
    margin-top: 12px;
    .approval-block-top-title {
      font-size: 18px;
      font-weight: 500;
      color: #3c3d43;
      line-height: 27px;
      margin-right: 12px;
    }
    .approval-block-top-num {
      font-size: 12px;
      font-weight: 400;
      color: #a6a8b4;
      line-height: 18px;
    }

    .approval-block-title {
      font-size: 16px;
      line-height:16px;
      font-weight: 500;
      height: 16px;
      border-left: 2px solid $theme;
      padding-left: 8px;
      &.noBorder {
        border-left: none;
        padding-left: 0;
      }
    }
  }
  //

  .approval-block-po-Left {
    text-align: center;
    width: 64px;
    margin: 0 auto;
    .approval-block-po-Rela {
      position: relative;
      height: 64px;
      margin: 10px 0;
      .approval-block-po-avatar1 {
        position: absolute;
        top: -6px;
        left: 3px;
      }
      .approval-block-po-avatar2 {
        position: absolute;
        left: -14px;
    bottom: 8px;
      }
      .approval-block-po-avatar3 {
        position: absolute;
        right: 9px;
        bottom: 8px;
        z-index: 1
      }
      .approval-block-po-avatar4 {
        position: absolute;
        right: -14px;
        bottom: 0px;
        z-index: 1
      }
      .approval-block-po-abso {
        position: absolute;
        bottom: 3px;
        right: 7px;
        z-index: 1
      }
      .approval-block-po-abso-icon{
        font-size: 16px;
        color: '#fff';
        border-radius: '50%'
      }
    }
    .approval-block-po-white-space {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
  }
  .approval-block-po-white-space {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .approval-block-po-title {
    font-size: 14px;
    font-weight: 500;
    color: #55565d;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .approval-block-po-name {
    font-size: 12px;
    font-weight: 400;
    color: #767885;
    margin-bottom: 3px;
  }
  .approval-block-po-rig {
    line-height: 64px;
    text-align: center;
    .approval-block-po-dot {
      width: 4px;
      height: 4px;
      display: inline-block;
      border-radius: 50%;
      background: #e8e8e8;
      margin: 0 2px;
    }
    .approval-block-po-back32C {
      background: #32ccaa;
    }
    .approval-block-po-bacF7B {
      background: #f7b500;
    }
    .approval-block-po-bacFF7 {
      background: #ff7085;
    }
  }
  .approval-block-po-Bottom {
    width: 80px;
    text-align: center;
  }

  .po {
    .ant-col-3:last-child {
      .approval-block-po-rig {
        display: none;
      }
    }
  }
  // .approval-block-po-back32C {
  //   background: #32ccaa;
  // }

  // .approval-block-po-bacF7B {
  //   background: #f7b500;
  // }
  // .approval-block-po-bacFF7 {
  //   background: #ff7085;
  // }
  .approval-form {
    .ant-upload.ant-upload-disabled {
      display: none;
    }
    .ant-form-item-label > label {
      color: #A6A8B4;
    }
  }
}
